<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: red;
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<script>
		var box = document.getElementsByClassName('box')[0];
		var timer = null;
		box.onclick = function () {
			startMove(this,50);
		}
		function startMove (obj,target) {
			var iSpeed,
				iCur;
			clearInterval(timer);
			timer = setInterval(function () {
				iCur = parseFloat(getStyle(obj,'opacity')) * 100;
				iSpeed = (target - iCur) / 7;
				// console.log(iSpeed);
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				if(iCur === target) {
					clearInterval(timer);
				}else {
					obj.style.opacity = (iCur + iSpeed) / 100;

				}
			},30);

		}	
		function getStyle (elem,prop) {
			if(window.getComputedStyle) {
				return window.getComputedStyle(elem,null)[prop];
			}else {
				return elem.currentStyle[prop];
			}
		}
	</script>
</body>
</html>